<template>
  <div
          class="sum"
          style="width: 100%;height: 100%;overflow-x:auto;overflow-y:auto"
  >
    <a-row>
      <a-row class="button_show">
        <a-tabs default-active-key="1" @change="callback">
          <a-tab-pane key="1" tab="轴的弯曲振动">
            <div class="all">
              <!--        //上一-->
              <div class="all-top">
                <div class="all-top-in-sum">
                  <!--                //左侧-->
                  <div class="all-top-in-left">
                    <div class="all-top-in-title">参数输入</div>
                    <div class="all-top-in-ul">
                      <div style="margin-left: -24%">
                        <ul>
                          <li>轴的大径(mm)</li>
                          <li>轴的小径(mm)</li>
                          <li>轴的长度(mm)</li>
                        </ul>
                      </div>
                      <div>
                        <li><input v-model="params_19.form1.D" /></li>
                        <li><input v-model="params_19.form1.d" /></li>
                        <li><input v-model="params_19.form1.L" /></li>
                      </div>
                      <div style="margin-left: 10px">
                        <ul>
                          <li>密度(Kg/m^3)</li>
                          <li>杨式模量(MPa)</li>
                          <li>计算阶次</li>
                        </ul>
                      </div>
                      <div>
                        <li><input v-model="params_19.form1.cc" /></li>
                        <li><input v-model="params_19.form1.E" /></li>
                        <li><input v-model="params_19.form1.x" /></li>
                      </div>
                    </div>
                  </div>
                  <!--                //右侧-->
                  <div class="all-top-in-right">
                    <div class="all-top-in-right-title">
                      参考图形
                    </div>
                    <div class="top-photo">
                      <img
                              style="width: 40%;"
                              :src="img.img4"
                      />
                    </div>
                  </div>
                </div>
              </div>
              <div class="all-bottom-1">
                <div class="all-bottom-1-title">
                  两端铰链简单轴弯曲振动
                </div>
                <div style="display: flex" class="all-bottom-1-contest">
                  <div style="width:15%;height: 100%;">
                    <button class="count-2" @click="tclick1">计算</button>
                  </div>
                  <div style="width:35%">
                    <img
                            style="margin-top: 5%; margin-left: 0%;width: 60%;height: 60%;"
                            :src="img.img3"
                    />
                  </div>

                  <div class="print-1">
                    <el-table
                            :data="tableData1"
                            style="width: 100%;color: black"
                            size="mini"
                            height="100%"
                            stripe
                    >
                      <el-table-column
                              prop="data1"
                              label="阶次"
                              width="80">
                      </el-table-column>
                      <el-table-column
                              prop="data2"
                              label="转速(*10^4rpm)"
                              width="120">
                      </el-table-column>
                    </el-table>
                  </div>
                </div>
              </div>
              <div class="all-bottom-1">
                <div class="all-bottom-1-title">
                  悬臂简单轴弯曲振动
                </div>
                <div style="display: flex" class="all-bottom-1-contest">
                  <div style="width:15%;height: 100%;">
                    <button class="count-2" @click="tclick2">计算</button>
                  </div>
                  <div style="width:35%">
                    <img
                            style="margin-top: 5%; margin-left: 0%;width: 60%;height: 60%;"
                            :src="img.img5"
                    />
                  </div>

                  <div class="print-1">
                    <el-table
                            :data="tableData2"
                            style="width: 100%;color: black"
                            size="mini"
                            height="100%"
                            stripe
                    >
                      <el-table-column
                              prop="data3"
                              label="阶次"
                              width="80">
                      </el-table-column>
                      <el-table-column
                              prop="data4"
                              label="转速(*10^4rpm)"
                              width="120">
                      </el-table-column>
                    </el-table>
                  </div>
                </div>
              </div>
              <div class="all-bottom-1">
                <div class="all-bottom-1-title">
                  两端固链简单轴弯曲振动
                </div>
                <div style="display: flex" class="all-bottom-1-contest">
                  <div style="width:15%;height: 100%;">
                    <button class="count-2" @click="tclick3">计算</button>
                  </div>
                  <div style="width:35%;">
                    <img
                            style="width:35%;margin-top: 5%; margin-left: 0%;width: 60%;height: 60%;"
                            :src="img.img1"
                    />
                  </div>

                  <div class="print-1">
                    <el-table
                            :data="tableData3"
                            style="width: 100%;color: black"
                            size="mini"
                            height="100%"
                            stripe
                    >
                      <el-table-column
                              prop="data5"
                              label="阶次"
                              width="80">
                      </el-table-column>
                      <el-table-column
                              prop="data6"
                              label="转速(*10^4rpm)"
                              width="120">
                      </el-table-column>
                    </el-table>
                  </div>
                </div>
              </div>
            </div>
          </a-tab-pane>
          <a-tab-pane key="2" tab="轴的纵向振动" force-render>
            <div class="all">
              <!--        //上一-->
              <div class="all-top">
                <div class="all-top-in-sum">
                  <!--                //左侧-->
                  <div class="all-top-in-left">
                    <div class="all-top-in-title">参数输入</div>
                    <div class="all-top-in-ul">
                      <div class="text1">
                        <ul>
                          <li>跨距（mm）</li>
                          <li>密度（Kg/m^3）</li>
                          <li>弹性模量（MPa）</li>
                          <li>计算阶次</li>
                        </ul>
                      </div>
                      <div class="text2">
                        <ul>
                          <li><input v-model="params_19.form2.L" /></li>
                          <li><input v-model="params_19.form2.p" /></li>
                          <li><input v-model="params_19.form2.E" /></li>
                          <li><input v-model="params_19.form2.x" /></li>
                        </ul>
                      </div>
                    </div>
                  </div>
                  <!--                //右侧-->
                  <div class="all-top-in-right">
                    <div class="all-top-in-right-title">
                      参考图形
                    </div>
                    <div class="top-photo">
                      <img
                              style="width: 40%;"
                              :src="img.img4"
                      />
                    </div>
                  </div>
                </div>
              </div>
              <div class="all-bottom-1">
                <div class="all-bottom-1-title">
                  两端自由简单轴纵向振动
                </div>
                <div style="display: flex" class="all-bottom-1-contest">
                  <div style="width:15%;height: 100%;">
                    <button class="count-2" @click="tclick4">计算</button>
                  </div>
                  <div style="width:35%">
                    <img
                            style="margin-top: 5%; margin-left: 0%;width: 60%;height: 60%;"
                            :src="img.img3"
                    />
                  </div>
                  <div class="print-1">
                    <el-table
                            :data="tableData4"
                            style="width: 100%;color: black"
                            size="mini"
                            height="100%"
                            stripe
                    >
                      <el-table-column
                              prop="data7"
                              label="阶次"
                              width="80">
                      </el-table-column>
                      <el-table-column
                              prop="data8"
                              label="转速(*10^4rpm)"
                              width="120">
                      </el-table-column>
                    </el-table>
                  </div>
                </div>
              </div>
              <div class="all-bottom-1">
                <div class="all-bottom-1-title">
                  悬臂简单轴纵向振动
                </div>
                <div style="display: flex" class="all-bottom-1-contest">
                  <div style="width:15%;height: 100%;">
                    <button class="count-2" @click="tclick5">计算</button>
                  </div>
                  <div style="width:35%">
                    <img
                            style="margin-top: 5%; margin-left: 0%;width: 60%;height: 60%;"
                            :src="img.img2"
                    />
                  </div>
                  <div class="print-1">
                    <el-table
                            :data="tableData5"
                            style="width: 100%;color: black"
                            size="mini"
                            height="100%"
                            stripe
                    >
                      <el-table-column
                              prop="data9"
                              label="阶次"
                              width="80">
                      </el-table-column>
                      <el-table-column
                              prop="data10"
                              label="转速(*10^4rpm)"
                              width="120">
                      </el-table-column>
                    </el-table>
                  </div>
                </div>
              </div>
              <div class="all-bottom-1">
                <div class="all-bottom-1-title">
                  两端固链简单轴纵向振动
                </div>
                <div style="display: flex" class="all-bottom-1-contest">
                  <div style="width:15%;height: 100%;">
                    <button class="count-2" @click="tclick6">计算</button>
                  </div>
                  <div style="width:35%;">
                    <img
                            style="width:35%;margin-top: 5%; margin-left: 0%;width: 60%;height: 60%;"
                            :src="img.img1"
                    />
                  </div>
                  <div class="print-1">
                    <el-table
                            :data="tableData6"
                            style="width: 100%;color: black"
                            size="mini"
                            height="100%"
                            stripe
                    >
                      <el-table-column
                              prop="data11"
                              label="阶次"
                              width="80">
                      </el-table-column>
                      <el-table-column
                              prop="data12"
                              label="转速(*10^4rpm)"
                              width="120">
                      </el-table-column>
                    </el-table>
                  </div>
                </div>
              </div>
            </div>
          </a-tab-pane>
          <a-tab-pane key="3" tab="轴的扭转振动">
            <div class="all">
              <!--        //上一-->
              <div class="all-top">
                <div class="all-top-in-sum">
                  <!--                //左侧-->
                  <div class="all-top-in-left">
                    <div class="all-top-in-title">参数输入</div>
                    <div class="all-top-in-ul">
                      <div class="text1">
                        <ul>
                          <li>跨距（mm）</li>
                          <li>密度（Kg/m^3）</li>
                          <li>裁剪模量（MPa）</li>
                          <li>计算阶次</li>
                        </ul>
                      </div>
                      <div class="text2">
                        <ul>
                          <li><input v-model="params_19.form2.L" /></li>
                          <li><input v-model="params_19.form2.p" /></li>
                          <li><input v-model="params_19.form2.E" /></li>
                          <li><input v-model="params_19.form2.x" /></li>
                        </ul>
                      </div>
                    </div>
                  </div>
                  <!--                //右侧-->
                  <div class="all-top-in-right">
                    <div class="all-top-in-right-title">
                      参考图形
                    </div>
                    <div class="top-photo">
                      <img
                              style="width: 40%;"
                              :src="img.img4"
                      />
                    </div>
                  </div>
                </div>
              </div>
              <div class="all-bottom-1">
                <div class="all-bottom-1-title">
                  两端铰链简单轴扭转振动
                </div>
                <div style="display: flex" class="all-bottom-1-contest">
                  <div style="width:15%;height: 100%;">
                    <button class="count-2" @click="tclick7">计算</button>
                  </div>
                  <div style="width:35%">
                    <img
                            style="margin-top: 5%; margin-left: 0%;width: 60%;height: 60%;"
                            :src="img.img3"
                    />
                  </div>

                  <div class="print-1">
                    <el-table
                            :data="tableData7"
                            style="width: 100%;color: black"
                            size="mini"
                            height="100%"
                            stripe
                    >
                      <el-table-column
                              prop="data13"
                              label="阶次"
                              width="80">
                      </el-table-column>
                      <el-table-column
                              prop="data14"
                              label="转速(*10^4rpm)"
                              width="120">
                      </el-table-column>
                    </el-table>
                  </div>
                </div>
              </div>
              <div class="all-bottom-1">
                <div class="all-bottom-1-title">
                  悬臂简单轴扭转振动
                </div>
                <div style="display: flex" class="all-bottom-1-contest">
                  <div style="width:15%;height: 100%;">
                    <button class="count-2" @click="tclick8">计算</button>
                  </div>
                  <div style="width:35%">
                    <img
                            style="margin-top: 5%; margin-left: 0%;width: 60%;height: 60%;"
                            :src="img.img5"
                    />
                  </div>

                  <div class="print-1">
                    <el-table
                            :data="tableData8"
                            style="width: 100%;color: black"
                            size="mini"
                            height="100%"
                            stripe
                    >
                      <el-table-column
                              prop="data15"
                              label="阶次"
                              width="80">
                      </el-table-column>
                      <el-table-column
                              prop="data16"
                              label="转速(*10^4rpm)"
                              width="120">
                      </el-table-column>
                    </el-table>
                  </div>
                </div>
              </div>
              <div class="all-bottom-1">
                <div class="all-bottom-1-title">
                  两端铰链简单轴扭转振动
                </div>
                <div style="display: flex" class="all-bottom-1-contest">
                  <div style="width:15%;height: 100%;">
                    <button class="count-2" @click="tclick9">计算</button>
                  </div>
                  <div style="width:35%;">
                    <img
                            style="width:35%;margin-top: 5%; margin-left: 0%;width: 60%;height: 60%;"
                            :src="img.img1"
                    />
                  </div>

                  <div class="print-1">
                    <el-table
                            :data="tableData9"
                            style="width: 100%;color: black"
                            size="mini"
                            height="100%"
                            stripe
                    >
                      <el-table-column
                              prop="data17"
                              label="阶次"
                              width="80">
                      </el-table-column>
                      <el-table-column
                              prop="data18"
                              label="转速(*10^4rpm)"
                              width="120">
                      </el-table-column>
                    </el-table>
                  </div>
                </div>
              </div>
            </div>
          </a-tab-pane>
        </a-tabs>
      </a-row>
    </a-row>
  </div>
</template>

<script>
  import {
    vibration_longitude_1,
    vibration_longitude_2,
    vibration_longitude_3,
    vibration_longitude_4, vibration_longitude_5, vibration_longitude_6
  } from "../../../api/file";

  import img1 from "@/assets/image/Image_19_01.png";
  import img2 from "@/assets/image/Image_19_02.png";
  import img3 from "@/assets/image/Image_19_03.png";
  import img4 from "@/assets/image/Image_19_04.jpg";
  import img5 from "@/assets/image/Image_19_05.png";
  export default {
    created() {
      document.title = '简单的轴振动计算' //模块中文名
      this.$store.state.file.key = 19 //设置key为自己的页面编号
    },
    name: "vibration_longitude",
    data() {
      return {
        img:{
          img1,
          img2,
          img3,
          img4,
          img5
        },
        params_19:this.$store.state.file.dataList[19],
        form2: {
          L: "2100",
          p: "7850",
          E: "210000",
          x: "3",
        },
        form1: {
          D: 170,
          d: 130,
          L: 2100,
          cc: 7850,
          E: 210000,
          x: 3
        },
        tableData1:[],
        tableData2:[],
        tableData3:[],
        tableData4:[],
        tableData5:[],
        tableData6:[],
        tableData7:[],
        tableData8:[],
        tableData9:[],
      };
    },
    methods: {
      tclick1:function () {
        vibration_longitude_2(this.params_19.form1).then(res=>{
          var arr;
          arr=res[0].split(' ').filter(x=>x!=="");
          for (let i=0;i<arr.length;i=i+2){
            this.tableData1.push({
              data1:arr[i],
              data2:arr[i+1],
            })
          }
          console.log(this.params_19.form1.x)
          console.log(arr);
        })
      },
      tclick2:function () {
        vibration_longitude_1(this.params_19.form1).then(res=>{
          var arr;
          arr=res[0].split(' ').filter(x=>x!=="");
          for (let i=0;i<arr.length;i=i+2){
            this.tableData2.push({
              data3:arr[i],
              data4:arr[i+1],
            })
          }
          console.log(this.params_19.form1.x)
          console.log(arr);
        })
      },
      tclick3:function () {
        vibration_longitude_3(this.params_19.form1).then(res=>{
          var arr;
          arr=res[0].split(' ').filter(x=>x!=="");
          for (let i=0;i<arr.length;i=i+2){
            this.tableData3.push({
              data5:arr[i],
              data6:arr[i+1],
            })
          }
          console.log(this.params_19.form1.x)
          console.log(arr);
        })
      },
      tclick4:function () {
        vibration_longitude_4(this.params_19.form2).then(res=>{
          var arr;
          arr=res[0].split(' ').filter(x=>x!=="");
          for (let i=0;i<arr.length;i=i+2){
            this.tableData4.push({
              data7:arr[i],
              data8:arr[i+1],
            })
          }
          console.log(this.params_19.form1.x)
          console.log(arr);
        })
      },
      tclick7:function () {
        vibration_longitude_4(this.params_19.form2).then(res=>{
          var arr;
          arr=res[0].split(' ').filter(x=>x!=="");
          for (let i=0;i<arr.length;i=i+2){
            this.tableData7.push({
              data13:arr[i],
              data14:arr[i+1],
            })
          }
          console.log(this.params_19.form1.x)
          console.log(arr);
        })
      },
      tclick6:function () {
        vibration_longitude_5(this.params_19.form2).then(res=>{
          var arr;
          arr=res[0].split(' ').filter(x=>x!=="");
          for (let i=0;i<arr.length;i=i+2){
            this.tableData6.push({
              data11:arr[i],
              data12:arr[i+1],
            })
          }
          console.log(this.params_19.form1.x)
          console.log(arr);
        })
      },
      tclick9:function () {
        vibration_longitude_5(this.params_19.form2).then(res=>{
          var arr;
          arr=res[0].split(' ').filter(x=>x!=="");
          for (let i=0;i<arr.length;i=i+2){
            this.tableData9.push({
              data17:arr[i],
              data18:arr[i+1],
            })
          }
          console.log(this.params_19.form1.x)
          console.log(arr);
        })
      },
      tclick5:function () {
        vibration_longitude_6(this.params_19.form2).then(res=>{
          var arr;
          arr=res[0].split(' ').filter(x=>x!=="");
          for (let i=0;i<arr.length;i=i+2){
            this.tableData5.push({
              data9:arr[i],
              data10:arr[i+1],
            })
          }
          console.log(this.params_19.form1.x)
          console.log(arr);
        })
      },
      tclick8:function () {
        vibration_longitude_6(this.params_19.form2).then(res=>{
          var arr;
          arr=res[0].split(' ').filter(x=>x!=="");
          for (let i=0;i<arr.length;i=i+2){
            this.tableData8.push({
              data15:arr[i],
              data16:arr[i+1],
            })
          }
          console.log(this.params_19.form1.x)
          console.log(arr);
        })
      },
      callback(key) {
        console.log(key);
      },
    }
  };
</script>

<style scoped>
  .fil {
    border-radius: 3px;
    border: rgba(231, 231, 231, 0.486) 1px solid;
    width: 100%;
    height: 6%;
    background: #d7d7d7;
  }
  .fil_text {
    color: black;
    font-size: 16px;
    padding-left: 30px;
    padding-top: 0.52%;
  }
  .button_show {
    margin-top: 0.4%;
    margin-bottom: 0.4%;
    margin-left: 0.4%;
  }
  .all {
    width: 100%;
    height: 636px;
    /*border-style: solid;*/
    /*border-width: 5px;*/
    /*background-color: #6DD400;*/
  }
  .all-top {
    width: 100%;
    height: 30%;
  }
  /*.all-top-top-1{*/
  /*    width: 100%;*/
  /*    height: 15%;*/
  /*    background-color: #000000;*/
  /*}*/
  /*.all-top-top-1-text{*/
  /*    !*text-align: center;*!*/
  /*    padding-left: 2%;*/
  /*    color: #ffffff;*/
  /*    padding-top: 10px;*/
  /*    font-size: 16px;*/
  /*}*/

  .all-top-button {
    margin-top: 1%;
    width: 100%;
    height: 15%;
    margin-left: 4px;
    /*background-color: #6DD400;*/
  }
  .all-top-button-btn {
    border-radius: 5px;
    font-size: 16px;
    width: 109px;
    height: 29px;
  }
  .all-top-in-sum {
    display: flex;
    /*background-color: steelblue;*/
    height: 85%;
    width: 100%;
  }
  .all-top-in-left {
    /*margin-top: 5px;*/
    /*background-color: indianred;*/
    width: 40%;
    height: 100%;
    box-shadow: 1.5px 1.5px 2px #aaaaaa;
    border: 0.5px solid rgba(231, 231, 231, 0.486);
    border-radius: 3px;
  }
  .all-top-in-title {
    /*font-size: 16px;*/
    /*margin-left: 2%;*/
    /*!*height: px;*!*/
    padding-top: 0.5%;
    /*height: 20%;*/
    font-size: 17.5px;
    border-radius: 3px;
    padding-left: 3%;
    font-weight: bolder;
    background-color: #d7d7d7;
    height: 15%;
  }
  .all-top-in-ul {
    margin-top: 1%;
    display: flex;
    margin-left: 30%;
    /*text-align: center;*/
    height: 80%;
  }
  .text1 {
    text-align: right;
    /*background-color: aqua;*/
    height: 80%;
    margin-right: 5%;
  }
  .text2 {
    text-align: right;
    /*background-color: coral;*/
    height: 80%;
  }
  .all-top-in-right {
    width: 50%;
    /*background-color: #6DD400;*/
    height: 100%;
    /*height: 100%;*/
    margin-left: 4%;
    box-shadow: 1.5px 1.5px 2px #aaaaaa;
    border: 0.5px solid rgba(231, 231, 231, 0.486);
    border-radius: 3px;
  }
  .all-top-in-right-title {
    padding-top: 5px;
    font-size: 17.5px;
    border-radius: 3px;
    padding-left: 3%;
    font-weight: bolder;
    background-color: #d7d7d7;
    height: 15%;
    width: 100%;
  }
  .top-photo {
    margin-top: 2%;
    text-align: center;
  }
  .all-bottom-1 {
    height: 20%;
    width: 94%;
    /*background-color: #42b983;*/
    margin-top: 0.5%;
    box-shadow: 1.5px 1.5px 2px #aaaaaa;
    border: 0.5px solid rgba(231, 231, 231, 0.486);
    border-radius: 3px;
  }
  .all-bottom-1-title {
    font-size: 17.5px;
    background-color: #d7d7d7;
    border-radius: 3px;
    padding-left: 3%;
    font-weight: bolder;
    width: 100%;
    height: 20%;
  }
  .all-bottom-1-contest {
    height: 80%;
  }
  .count-1 {
    border-radius: 4px;
    border: 2px #686868;
    width: 20%;
    height: 25%;
    font-size: 16px;
    background-color: #6dd400;
    border-radius: 4px;
    border: 2px #686868;
    margin-top: 2%;
    margin-left: 10%;
  }
  .count-2 {
    border-radius: 4px;
    border: 2px #686868;
    width: 40%;
    height: 20%;
    font-size: 16px;
    background-color: #6dd400;
    border-radius: 4px;
    border: 2px #686868;
    margin-top: 2%;
    margin-left: 20%;
  }
  .print-1 {
    margin-left: 15%;
    border-radius: 5px;
    font-size: 13.5px;
    background-color: #f2f2f2;
    width: 20%;
    height: 100%;
  }
  .table-th {
    width: 20%;
    height: 12%;
    text-align: center;
  }
  .table-td {
    height: 12%;
    text-align: center;
  }
  .print-right {
    text-align: right;
  }
  .all-bottom {
    width: 100%;
    height: 20%;
    background-color: #686868;
  }
</style>